<!--
 * @Author: zls 3292844045@qq.com
 * @Date: 2022-05-21 09:40:29
 * @LastEditors: zls 3292844045@qq.com
 * @LastEditTime: 2022-05-26 11:53:32
 * @FilePath: \CUCCL\html\main.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>古驰GUCCI中国官方网站-时装奢侈品牌-重新定义精品风尚</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_3418519_5teuh194lbw.css"
    />
    <link rel="stylesheet" href="../css/init_css/reset.css" />
    <link rel="stylesheet" href="../css/main_css/main.css" />
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
  </head>

  <body>
    <!-- 头部部分 -->
    <header class="splice-header">
      <div class="splice-container header-transparent">
        <nav class="splice-navbar">
          <!-- logo部分 -->
          <div class="splice-navbar-top">
            <!-- 三部分, 左侧 中间 右侧 -->
            <div class="splice-navbar-left">
              <ul>
                <li>
                  <a href="">
                    <i
                      class="iconfont icon-wxbdingwei"
                      style="opacity: 0.5"
                    ></i>
                    <span>配送至：</span>
                    <span>中国大陆地区</span>
                  </a>
                  <!-- 鼠标滑过显示下方隐藏的div -->
                  <!-- <div class="splice-sub-menu splic-sub-menu-hidden">
                    <h6>网上商城</h6>
                    <p>请注意，在浏览过程中更改您的位置将会清除购物袋中的所有商品。</p>
                </div> -->
                </li>
                <li>
                  <a href="">
                    <span>客户服务</span>
                  </a>
                </li>
                <li>
                  <a href="">
                    <i class="iconfont icon-dianhua"></i>
                    <span>400.8210.582</span>
                  </a>
                </li>
              </ul>
            </div>

            <div class="splice-navbar-right">
              
              <a class="login">登录</a>
              <!-- //心愿单 -->
              <a href="" class="splice-nav-savedItems">
                <i class="iconfont icon-icon"></i>
              </a>
              <!-- 购物车 -->
              <a href="" class="shopping-cart">
                <i class="iconfont icon-gouwudai"></i>
                <span>购物车</span>
              </a>

              <!-- //搜索框 -->
              <a class="header-search"> </a>
            </div>
            <div class="splice-navbar-logo">
              <a href="https://www.gucci.cn/zh/">
                <img
                  src="https://res.gucci.cn/images/common/gucci-logo@2x.png"
                  alt="GUCCI"
                />
              </a>
            </div>
          </div>
          <!-- logo下面菜单 -->
          <div class="splice-navbar-menu">
            <ul class="splice-nav">
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">全球资讯</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">手袋</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="./female.html">
                  <span class="navtitletxt">女士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">男士</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">童装</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">礼品</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">珠宝和腕表</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">美妆</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
              <li class="splice-nav-menu">
                <a href="">
                  <span class="navtitletxt">生活和艺术</span>
                </a>
                <!-- 滑过显示德部分 -->
                <div class="splice-nav-hid"></div>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <!-- 主体部分 -->
    <section>
      <!-- 轮播图部分 -->
      <div class="banner">
        <!-- 图片部分 -->
        <div class="box"></div>
        <!-- 左滑 -->
        <i class="iconfont icon-zuobianjiantou prev"></i>
        <!-- 右滑 -->
        <i class="iconfont icon-youbianjiantou next"></i>
        <!-- 切换小圆点 -->
        <ul class="dot">
          <!-- <li class="show"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li> -->
        </ul>
      </div>

      <!-- 中间部分商品展示 -->
      <!-- 包 -->
      <div class="product_package_clothes">
        <div class="product_pack">
          <!-- 包包 -->
          <a href="">
            <img
              src="https://res.gucci.cn/resources//2022/5/17/16527881063077658.png"
              alt=""
            />
          </a>
        </div>
        <div class="product_pack_content">
          <p>《古驰爱的进行曲》系列</p>
          <h2>饰互扣式双G中号背包</h2>
          <img src="../images/tag.png" alt="" />
          <div class="shop_this">
            <!-- 点击购买 -->
            <a href=""> 点击购买 </a>
          </div>
        </div>
      </div>

      <!-- 衣服 -->
      <div class="product_clothes">
        <div class="product_clo">
          <!-- 衣服 -->
          <a href="">
            <img
              src="https://res.gucci.cn/resources//2022/5/17/16527838922259172.png"
              alt=""
            />
          </a>
        </div>
        <div class="product_clo_content">
          <p>《古驰爱的进行曲》系列</p>
          <h2>男士服饰</h2>
          <img src="../images/tag.png" alt="" />
          <div class="shop_this">
            <!-- 点击购买 -->
            <a href=""> 点击购买 </a>
          </div>
        </div>
      </div>
      <div class="blank"></div>
      <!-- 鞋子 -->
      <div class="product_shoes">
        <div class="shoes_img">
          <a href="">
            <img
              src="https://res.gucci.cn/resources//2022/5/17/1652795104854964_style_DarkGray_Center_0_0_1400x1400_1650560440_700641_UPG90_1282_001_100_0000_Light-GG.jpg"
              alt=""
            />
          </a>
        </div>
        <div class="shoes_content">
          <p>《古驰爱的进行曲》系列</p>
          <h2>男士GG运动鞋</h2>
          <img src="../images/tag.png" alt="" />
          <div class="shop_this">
            <!-- 点击购买 -->
            <a href=""> 点击购买 </a>
          </div>
        </div>
      </div>

      <!-- 新的系列 跳转到vidio-->
      <div class="new_series">
        <div class="page_new_series">
          <!-- 播放视频对应的内容 -->
          <div class="homepage_video-content">
            <div class="title">
              <span>Gucci Cosmogon ie</span>
            </div>
            <div class="text">亚力山卓·米开理倾力打造的全新系列</div>
          </div>
          <!-- 跳转到video -->
          <div class="homepage_video">
            <a href="">
              查看更多
              <i class="iconfont icon-youjiantou"></i>
            </a>
          </div>
        </div>
      </div>

      <!-- 古驰故事 -->
      <div class="gucci_stories">
        <!-- 标题部分 -->
        <div class="stories_header">
          <h2>古驰故事</h2>
          <i class="header_line"></i>
        </div>
        <!-- 内容部分 -->
        <div class="stories_content">
          <div class="stories_img img0">
            <div class="item_inner">
              <a href="">
                <img src="https://res.gucci.cn/resources//2022/5/17/16527833241304687_content_StyleNewsSingle_Standard_340x202_1652739363_StyleNewsSingle_cosmogonie-showspace-2022_001_Default.jpg" alt="">

              </a>
              <div class="title">探索蒙特城堡</div>
              <div class="link">
                <a href="">
                  全新时装秀选址 
                </a>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
          </div>
          <div class="stories_img img1">
            <div class="item_inner">
              <a href="">
                <img src="https://res.gucci.cn/resources//2022/5/17/16527833241309196_content_StyleNewsSingle_Standard_340x202_1647619207_StyleNewsSingle_va-fashioning-masculinities_001_Default.jpg" alt="">

              </a>
              <div class="title">雄姿万象</div>
              <div class="link">
                <a href="">
                  男装的艺术  
                </a>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
          </div>
          <div class="stories_img img2">
            <div class="item_inner">
              <a href="">
                <img src="https://res.gucci.cn/resources//2022/5/17/1652783324130320_content_StyleNewsDoubleVertical_Standard_340x602_1652749354_StyleNewsDoubleVertical_Cosmogonie-look-gallery_001_Default.jpg" alt="">

              </a>
              <div class="title">Gucci Cosmogonie：全新造型</div>
              <div class="link">
                <a href="">
                  探索该系列  
                </a>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
          </div>
          <div class="stories_img img3">
            <div class="item_inner">
              <a href="">
                <img src="https://res.gucci.cn/resources//2022/5/18/16528395088681656_content_StyleNewsSingle_Standard_680x404_1652771705_StyleNewsSingle_Cosmogonie-gallery-guests_001_Default.jpg" alt="">

              </a>
              <div class="title">Gucci Cosmogonie出席嘉宾</div>
              <div class="link">
                <a href="">
                  图库   
                </a>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
          </div>
        
         
          <div class="stories_img img4">
            <div class="item_inner">
              <a href="">
                <img src="https://res.gucci.cn/resources//2022/5/17/16527833241307768_content_StyleNewsSingle_Standard_340x202_1646133304_StyleNewsSingle_Exquisite-details_001_Default.jpg" alt="">

              </a>
              <div class="title">梦幻魔镜</div>
              <div class="link">
                <a href="">
                  EXQUISITE GUCCI  
                </a>
                <i class="iconfont icon-youjiantou"></i>
              </div>
            </div>
          </div>
        
        </div>
        <!-- 尾部部分 -->
        <div class="stories_footer">
          <div class="view_all">
            <a href="">欣赏更多故事</a>
          </div>
        </div>
      </div>
    </section>
    <div class="foot_blank"></div>

    <!-- 尾部 -->
    <footer class="splice_footer">
      <!-- 尾部主体 -->
      <div class="splice_container">
        <!-- 返回顶部 -->
        <div class="splice_back_top">
          <i class="iconfont icon-xiangshangjiantou"></i>
        </div>
        <!-- 尾部内容 -->
        <div class="splice_footer_content">
          <!-- 左边 -->
          <div class="splice_footer_left">
            <ul>
              <!-- 免费服务 -->
              <li class="spice_exclusive_service">
                <div class="spice_footer_title">
                  <span>专属服务</span>
                </div>
                <ul class="spice_all">
                  <li><span>免费标准配送</span></li>
                  <li><span>免费礼品包装</span></li>
                  <li><span>预约门店服务</span></li>
                </ul>
              </li>
              <!-- 购买帮助 -->
              <li class="spice_shoping_help">
                <div class="spice_footer_title">
                  <span>购物帮忙</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                     <span>支付相关</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>配送</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>退换货</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>发票</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>保养与维修</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 关于公司 -->
              <li class="spice_about_company">
                <div class="spice_footer_title">
                  <span>关于公司</span>
                </div>

                <ul>
                  <li>
                    <a href="">
                      <span>关于GUCCI</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>GUCCI EQUILIBRIUM</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>道德规范</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>职业发展</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>细则及条款</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>隐私与COOKIE</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>企业信息</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 联系方式 -->
              <li class="spice_follow_gucci">
                <div class="spice_footer_title">
                  <span>关注GUCCI</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>微信</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>微博</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>抖音</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>腾讯视频</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>小红书</span>
                    </a>
                  </li>

                  <li class="slice_footer_tails">
                    <a href="">
                      <span>在线顾问</span>
                    </a>
                  </li>
                  <li class="slice_footer_tails">
                    <a href="">
                      <span>400.8210.582</span>
                    </a>
                  </li>
                </ul>
              </li>
              <!-- 需要帮助 -->
              <li class="spice_need_help">
                <div class="spice_footer_title">
                  <span>需要帮助?</span>
                </div>
                <ul>
                  <li>
                    <a href="">
                      <span>联系我们</span>
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <span>常见问题</span>
                    </a>
                  </li>
                </ul>
              </li>

            </ul>
          </div>
          <!-- 右边 -->
          <div class="splice_footer_right">
              <div class="splice_footer_right_content">
                <div class="spice_form_group">
                  <div class="spice_form_title">
                    订阅GUCCI电子资讯
                  </div>
                  <div class="spice_form_content">
                    <p class="spice_form_info">
                      通过订阅，即代表您接受GUCCI的
                      <a href="">
                        隐私政策条款
                      </a>
                    </p>
                    <div class="spice_form_input">
                      <input type="text" name="" id="" placeholder="电子邮件地址">
                    </div>
                  </div>
                  
                </div>
              </div>
          </div>
        </div>
      </div>
    </footer>





    <script src="../js/api.js"></script>
    <script src="../js/carouselFigure/carouselFigure.js"></script>
    <script>
      // 获取标签对象
      // 标题部分
      const $splice_nav = $(".splice-container");
      $splice_nav.on("mouseover", () => {
        $splice_nav.addClass("_bgactive");
      });

      $splice_nav.on("mouseout", () => {
        $splice_nav.removeClass("_bgactive");
      });
      // 鼠标滚动收起
      $(window).scroll(() => {
        // console.log();
        if ($(document).scrollTop() >= 20) {
          // console.log(1);
          $(".splice-container").removeClass("header-transparent");
          $(".splice-container").addClass("_compressed ");
        } else {
          $(".splice-container").removeClass("_compressed ");
          $(".splice-container").addClass("header-transparent");
        }
      });

      // 轮播图
      const $box = $(".box");
      // 轮播图部分
      async function turn() {
        let res = await carouselFigure();
        console.log(res["list"]);
        let html = "";
        let flag = "";
        let html2 = "";
        res["list"].forEach((v, i) => {
          // console.log(v.img_src);

          html += `
            <div>
              <img src=${v.img_src} alt="">
            </div>
          `;
          if (i == 0) {
            html2 += `
            <li class="show"></li>
          `;

            flag += `
              <div>
                <img src=${v.img_src} alt="">
              </div>
            `;
          } else {
            html2 += `
            <li></li>
          `;
          }
        });
        html += flag;
        $box.html(html);

        console.log(flag);
        $(".dot").html(html2);
        new Banner(".banner");
      }

      turn();

      let login_user = localStorage.getItem('LOGIN_NAME');
      console.log(login_user);
      if(login_user){
        $('.login').html('我的账户');
        // $('.login').attr('href',  "../html/login.html");
      }else{
        $('.login').attr('href',  "../html/login.html");
      }
    </script>
  </body>
</html>
